<template>
  <div class="message">
    <div class="tip">
      <span>有什么想对博主说的吗？</span>
      <b class="to_msg" @click="toMsg">去留言</b>
    </div>

    <MsgList id="msgList" v-if="list.length" :list=list @delete="deleteMessage" @delReply="deleteReply" @reply="replyMessage">
    </MsgList>

    <!-- 分页 条目小于10 则隐藏 -->
    <el-pagination v-if="total > 10" :current-page="page" @current-change="changPage" layout="prev, pager, next" :total="total">
    </el-pagination>

    <el-divider class="end_line">留言</el-divider>

    <MsgForm id="msgForm" tip="发表留言" @submit="postMessage"></MsgForm>

    <!-- 回复 -->
    <el-dialog :visible.sync="dialogReply" width="90%" :show-close="false" :modal-append-to-body="false">
      <MsgForm tip="发表回复" @submit="postReply"></MsgForm>
    </el-dialog>
  </div>
</template>

<script>
import MsgForm from '@/views/components/MsgForm'
import MsgList from '@/views/components/MsgList'

export default {
  name: 'Message',
  components: {
    MsgForm,
    MsgList,
  },
  data() {
    return {
      dialogReply: false, // 回复框
      imgUrl: '',
      list: [],
      total: 0,
      page:1,
      user: {
        userId: '',
        name: '',
        email: '',
        website: '',
        content: '',
      },
      replyData: {
        userId: '',
        replyUserId: '',
        messageId: '',
        content: '',
      },
      screenWidth: document.body.clientWidth,
    }
  },
  computed: {},
  mounted() {
    this.getUser()
    this.getMessages()
  },
  methods: {
    // 切换留言页数
    changPage(page) {
      this.getMessages(page)
    },
    // 到达留言框
    toMsg() {
      this.$el.querySelector('#msgForm').scrollIntoView()
    },
    // 获取用户信息
    getUser() {
      this.user = this.$store.state.user
    },
    // 发送留言
    postMessage(content) {
      const data = {
        userId: this.user.userId,
        content: content,
      }
      this.$api.httpMessage(data).then((res) => {
        if (res.code == 200) {
          this.$message.success('留言成功')
          this.getMessages(this.page)
        }
      })
    },
    // 回复留言
    replyMessage(messageId, replyUserId) {
      this.dialogReply = true

      this.replyData.userId = this.user.userId
      this.replyData.replyUserId = replyUserId
      this.replyData.messageId = messageId
    },
    // 回复
    postReply(content) {
      this.replyData.content = content

      this.$api.httpReply(this.replyData).then((res) => {
        if (res.code == 200) {
          this.$message.success('回复成功')
          this.getMessages(this.page)
          this.dialogReply = false
        }
      })
    },
    // 删除留言
    deleteMessage(messageId) {
      this.$api.httpMessageDelete(messageId).then((res) => {
        if (res.code == 200) {
          this.getMessages(this.page)
          this.$message.success('删除成功')
        }
      })
    },
    // 删除回复
    deleteReply(replyId) {
      this.$api.httpReplyDelete(replyId).then((res) => {
        if (res.code == 200) {
          this.getMessages(this.page)
          this.$message.success('删除成功')
        }
      })
    },
    // 获取留言 后期改为懒加载
    getMessages(page = 1, size) {
      // 如果是手机环境，则不弹出
      if (this.screenWidth >= 1200) {
        // 加载动画
        var loadingInstance = this.$loading.service({
          target: document.querySelector('.message'),
          fullscreen: false
        })
      }

      this.$api.httpMessageList({ page, size }).then((res) => {
        if (res.code == 200) {
          this.list = res.data.rows || []
          this.total = res.data.meta.count
          this.page = page

          if (loadingInstance){
            loadingInstance.close() // 关闭加载动画
          }

        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
// 分页
.el-pagination {
  margin: 48px 0;
  text-align: center;
}

::v-deep .el-dialog__header {
  padding: 0 !important;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
}

.message {
  width: 1200px;
  margin: 40px auto;

  // 留言
  .tip {
    color: $light-gray;
    margin-bottom: 20px;
    padding-left: 20px;

    font-size: 14px;

    .to_msg {
      color: $blue;
      cursor: pointer;
      padding-left: 10px;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .message {
    width: 100%;
  }

}
</style>